<template>
	<div class="">
		<div class="detail_area">
			<div class="content">
				<div class="wrapper">
					<div class="left">
						<div class="img_wrapper">
							<!-- <img :src="this.$route.query.item.thumb_url_cos" alt=""> -->
							<div class="bg_wrap" :style="{backgroundImage: `url(${this.$route.query.item.thumb_url_cos})`}">

							</div>
						</div>
						<div class="share_btn">
							<el-button size="medium" round>收藏本图</el-button>
							<el-button size="medium" round>
								<!-- http://back.turawstock.com/api/photo/download_thumb_img?src=this.$route.query.item.thumb_url_cos}&photo_id=this.$route.query.item.photo_id -->
								<a download='' :href="`http://back.turawstock.com/api/photo/download_thumb_img?src=`+this.$route.query.item.thumb_url_cos+`&id=`+this.$route.query.item.photo_id">小样下载</a></el-button>


							<el-button size="medium" round>图片分享</el-button>
						</div>
					</div>
					<div class="right">
						<div class="title">
							{{$route.query.item.describe}}
						</div>
						<div class="nickname">
							摄影师:{{this.$route.query.item.nickname}}
						</div>
						<div class="detail_info">
							<div class="btn_line">
								<button ref='btn1'  
								class="btn active" @click="add_active1">
									购买
								</button>
								<button ref='btn2' class="btn" @click="add_active2">详情</button>
							</div>
							<div class="size" v-show="buy_detail">
								<div class="size_title">
									尺寸
								</div>
								<div class="size_type">
									<div ref='btns' class="size_btn btns" @click="go_active1">
										S
									</div>
									<div ref='btnm' class="size_btn btns" @click="go_active2">
										M
									</div>
									<div ref='btnl' class="size_btn btns" @click="go_active3">
										L
									</div>
								</div>
								<div v-show="s_size" class="size_content s_size">
									1000px*667px jpg
								</div>
								<div v-show="m_size" class="size_content m_size">
									2000px*1335px jpg
								</div>
								<div v-show="l_size" class="size_content l_size">
									7360px*4912px jpg
								</div>
								<div class="authBox">
									<p class="desc">完整授权：广告用途并包含标准授权所有用途</p>
									<div class="switch">
										<el-switch v-model="value" active-color="#13ce66">
										</el-switch>
									</div>
								</div>
								<div class="auth_type">
									<div v-show="auth_show" ref='' :class="{btn_type: true, auth_active: auth_idx == index,btns: true}" v-for="(item, index) in auth_arr"
									:key='index' @click="auth_active_change(index)">
										{{item}}
									</div>
									<!-- <div ref='' class="btn_type">
										扩展授权
									</div>
									<div ref='' class="btn_type">
										高级授权
									</div> -->
								</div>
								<div class="explain_wrap" v-show="auth_show">
									<p class="explain" v-show="auth_idx == 0">
										数字用途：网站、微博、微信、电邮等。线下印刷：宣传页、海报、报纸杂志、图书等（限量50万份）
									</p>
									<p class="explain" v-show="auth_idx == 1">户外广告：楼宇、车身、灯箱、围挡、橱窗等。 （印刷数量无限）。</p>
									<p class="explain" v-show="auth_idx == 2">
										敏感用途：医疗、药品、烟草、美容整容、保健品类广告及宣传
									</p>
								</div>
								<div class="auth_side">
									<div class="up">
										被授权方
										<i class="el-icon-arrow-down" @click="change_arrow" v-show="!auth_side_show"></i>
										<i class="el-icon-arrow-up" @click="change_arrow" v-show="auth_side_show"></i>
									</div>
									
									<div class="add_btn btns" v-show="auth_side_show">
										添加被授权方
									</div>
								</div>
							</div>
							
							<div class="detail" v-show="!buy_detail">
								<div class="photo_id dtl_df">
									<div class="left">
										图片id:
									</div>
									<div class="right">
										{{this.$route.query.item.photo_id}}
									</div>
								</div>
								<div class="desc dtl_df">
									<div class="left">
										图片描述:
									</div>
									<div class="right">
										{{this.$route.query.item.describe}}
									</div>
								</div>
								<div class="authorize dtl_df">
									<div class="left">
										版权:
									</div>
									<div class="right">
										{{this.$route.query.item.nickname}}
									</div>
								</div>
								<div class="use dtl_df">
									<div class="left">
										用途:
									</div>
									<div class="right">
										商业用途
									</div>
								</div>
								<div class="camera dtl_df">
									<div class="left">
										相机品牌:
									</div>
									<div class="right">
										--
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

	</div>




</template>

<script>
	export default {
		created() {
			console.log(this.detail_item);
			// this.$refs.btn.forEach(el=>{
			// 	el.add
			// })
		},
		watch: {
			value() {
				if (this.value == true) {
					this.auth_show = true
				} else {
					this.auth_show = false
				}
			}
		},
		data() {
			return {
				detail_item: this.$route.query.item,
				value: false,
				auth_arr: ['标准授权', '扩展授权', '高级授权'],
				auth_idx: -1,
				s_size: false,
				m_size: false,
				l_size: false,
				auth_show: false,
				auth_side_show: false,
				buy_detail: true,
			}
		},
		methods: {
			add_active1() {
				this.$refs.btn2.classList.remove('active')
				this.$refs.btn1.classList.add('active')
				this.buy_detail = !this.buy_detail;
			},
			add_active2() {
				this.$refs.btn1.classList.remove('active')
				this.$refs.btn2.classList.add('active')
				this.buy_detail = !this.buy_detail;
			},
			go_active1() {
				this.$refs.btns.classList.remove('size_active')
				this.$refs.btnm.classList.remove('size_active')
				this.$refs.btnl.classList.remove('size_active')
				this.$refs.btns.classList.add('size_active')
				this.s_size = true;
				this.m_size = false;
				this.l_size = false;
			},
			go_active2() {
				this.$refs.btns.classList.remove('size_active')
				this.$refs.btnm.classList.remove('size_active')
				this.$refs.btnl.classList.remove('size_active')
				this.$refs.btnm.classList.add('size_active')
				this.s_size = false;
				this.m_size = true;
				this.l_size = false;
			},
			go_active3() {
				this.$refs.btns.classList.remove('size_active')
				this.$refs.btnm.classList.remove('size_active')
				this.$refs.btnl.classList.remove('size_active')
				this.$refs.btnl.classList.add('size_active')
				this.s_size = false;
				this.m_size = false;
				this.l_size = true;
			},
			auth_active_change(index) {
				this.auth_idx = index;
			},
			change_arrow(){
				this.auth_side_show = !this.auth_side_show;
			},
			buy_detail_change(){
				this.buy_detail = !this.buy_detail;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns:hover{
		background-color: gray;
		opacity: 0.5;
	}
	.title {
		font-family: "microsoft yahei";
		font-weight: 600;
		font-size: 20px;
	}

	.detail_area {
		background-color: white;
		width: 100%;
		padding-top: 40%;
		position: relative;

		.content {
			width: 90%;
			background-color: white;
			padding-top: 38%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.wrapper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;

				.left {
					width: 46%;
					height: 100%;
					background-color: white;

					.img_wrapper {
						width: 100%;
						height: 100%;
						text-align: center;

						.bg_wrap {
							width: 100%;
							height: 100%;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: 50%;
							// padding-top: 10%;
						}
					}

					.share_btn {
						display: flex;
						justify-content: center;
					}
				}

				.right {
					// position: absolute;
					// top: 0;
					// left: 0;
					// font-size: 50px;
					// width: 50%;
					// // height: 20px;
					// padding-top: 40%;
					width: 50%;
					height: 100%;
					background-color: white;

					.detail_info {
						width: 100%;
						height: auto;
						border: 1px solid black;
						padding: 5%;
						transition: all .5s;

						.btn_line {
							border-bottom: 1px solid black;
							display: flex;
							justify-content: flex-start;
							padding-left: 50px;
							margin-bottom: 20px;

							button {
								margin-bottom: -1px;
								background-color: white;
								width: 80px;
								height: 43px;
								// border: 2px solid black;
								border-bottom: 1px solid black;
							}

							.btn {
								margin-bottom: -1px;
							}

							.active {
								// margin-bottom: -5px;
								background-color: white;
								width: 80px;
								height: 43px;
								border: 1px solid black;
								border-bottom: 1px solid white;
							}


						}

						.size {
							.size_title {
								font-weight: 600;
								margin-bottom: 10px;
								text-align: left;
							}

							.size_type {
								display: flex;
								justify-content: flex-start;
								margin: 10px -4% 0;

								.size_btn {
									margin: 0 4%;
									width: 17%;
									height: 35px;
									line-height: 35px;
									border: 1px solid #49c5b6;
									color: #49c5b6;
									font-weight: 700;
									font-size: 20px;
									text-align: center;
									cursor: pointer;
									transition: all .5s;
								}

								.size_active {
									background: #49c5b6;
									color: #fff;
								}

							}

							.size_content {
								margin-top: 10px;
								color: #bdc1c0;
								text-align: center;
								font-size: 14px;
							}

							.authBox {
								display: flex;
								margin-top: 10px;

								.desc {
									font-size: 12px;
									line-height: 20px;
									font-family: "microsoft yahei";
								}

								.switch {
									margin-left: 15px;
								}
							}

							.auth_type {
								display: flex;
								justify-content: flex-start;
								margin: 10px -4% 0;

								.btn_type {
									width: 17%;
									text-align: center;
									font-weight: 700;
									height: 35px;
									line-height: 35px;
									border: 1px solid #49c5b6;
									color: #49c5b6;
									margin: 0 4%;
									cursor: pointer;
									transition: all .5s;
								}

								.auth_active {
									background: #49c5b6;
									color: #fff;
								}
							}

							.explain {
								width: 100%;
								padding: 10px 20px;
								padding-left: 0px;
								text-align: justify;
								color: #bdc1c0;
								font-size: 14px;
							}

							.auth_side {
								font-weight: 600;
								font-size: 16px;
								margin: 10px 0;
								.up{
									display: flex;
									justify-content: flex-start;
									margin: 4% 0;
									align-items: center;
									i{
										font-weight: 700;
										margin-left: 2%;
									}
								}
								// display: flex;
								
								.add_btn {
									margin: 2% 0%;
									width: 34%;
									height: 35px;
									line-height: 35px;
									border: 1px solid #49c5b6;
									color: #49c5b6;
									font-weight: 700;
									font-size: 20px;
									text-align: center;
									cursor: pointer;
									transition: all 0.5s;
								}
								
							}
						}
						
						.detail{
							.dtl_df{
								font-size: 14px;
								display: flex;
								.left{
									width: 30%;
									height: 30px;
									line-height: 30px;
									text-align: left;
								}
								.right{
									color: #a6aaa9;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									text-align: left;
									height: 30px;
									line-height: 30px;
								}
							}
						}
					}
				}
			}

		}
	}
</style>
